<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>演示this丢失</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//第一步：定义组件（类式组件）
			class Weather extends React.Component{
				constructor(props){
					super(props)
					//初始化state
					this.state = {isHot:true}
				}
				//render方法是放在Weather原型对象上的
				//render中的this是谁？—— 通过Weather的实例对象调用时，this就是Weather的实例对象
				render(){
					return (
						<div>
							<h2>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h2>
							<button onClick={this.changeWeather}>切换天气</button>	
						</div>
					)
				}
				//changeWeather方法是放在Weather原型对象上的
				//changeWeather中的this是谁？—— 通过Weather的实例对象调用时，this就是Weather的实例对象
				changeWeather() {
					// console.log('changeWeather被调用了')
					// this.state.isHot = false
					console.log('#',this)
				}
			}
			//第二步：渲染组件到页面
			ReactDOM.render(<Weather/>,document.getElementById('root'))
		</script>
	</body>
</html>